<template>
    <div class="c">
        <img class="bg" v-if="coupon_status == 0" src="../assets/images/mine/coupon-used.png" alt="" srcset="">
        <img class="bg" v-if="coupon_status == 1" src="../assets/images/mine/coupon-unuse.png" alt="" srcset="">
        <img class="bg" v-if="coupon_status == 2" src="../assets/images/mine/coupon-fail.png" alt="" srcset="">
        <span class="content-c">
            <div class="top">
                <!-- <p>{{ coupon.coupon.price_rate }}</p> -->
                <template v-if="coupon.coupon.price_rate == '0.00'">
                    <span class="t1">{{ coupon.coupon.coupon_text }}</span>
                </template>
                <template v-else>
                    <span class="t1">{{ (coupon.coupon.price_rate * 10).toFixed(0) }} {{ $t("优惠券.折") }}</span>
                    <span class="t2">{{ coupon.coupon.coupon_text }}</span>
                </template>
            </div>
            <div class="bottom" @click="item_click()">
                <span class="b1">{{ coupon.createtime_text }} - {{ coupon.expire_time_text }}</span>
                <span class="b2">{{ coupon_status == 1 ? t("已使用") : coupon_status == 0 ? t("未使用") : t("已过期") }}</span>
            </div>
        </span>
    </div>
</template>
<script>
export default {
    props: {
        coupon: {
            type: Object,
            default: () => { }
        },
        coupon_status: {
            type: Number | String,
            default: 0
        }
    },
    methods: {
       /**
       * 简化翻译方法(少写property)
       * @param {String} v 最后一个key值
       */
        t(v) {
            return this.$t(`优惠券.${v}`);
        },
        item_click() {
            if (this.coupon_status == 0) {
                this.$emit("click");
            }
        }
    },
}
</script>
<style lang="less" scoped>
.c {
    position: relative;

    .bg {
        width: 100%;
    }

    .content-c {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;

        .top {
            flex: 7;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .t1 {
                color: #FBD790;
                font-size: 20px;
            }

            .t2 {
                margin-top: 14px;
                color: #FBD790;
                font-size: 14px;
            }
        }

        .bottom {
            flex: 6;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .b1 {
                color: #FBD790;
                font-size: 10px;
            }

            .b2 {
                margin-top: 20px;
                color: 16px;
                font-size: #0A0A0B;
                background: #FBD790;
                border-radius: 4px;
                line-height: 28px;
                padding: 0px 30px;
                user-select: none;
                cursor: pointer;
            }
        }
    }

}
</style>